<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">
				<el-tab-pane label="扩展配置">
					<el-table :data="setting" stripe>
						<el-table-column label="配置key" prop="configKey" width="200">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.configKey" placeholder="请输入内容"></el-input>
								<span v-else>{{scope.row.configKey}}</span>
							</template>
						</el-table-column>
						<el-table-column label="配置value" prop="configValue" width="350">
							<template #default="scope">
								<template v-if="scope.row.isSet">
									<el-switch v-if="typeof scope.row.configValue==='boolean'" v-model="scope.row.configValue"></el-switch>
									<el-input v-else v-model="scope.row.configValue" placeholder="请输入内容"></el-input>
								</template>
								<span v-else>{{scope.row.configValue}}</span>
							</template>
						</el-table-column>
						<el-table-column label="配置类型" prop="configType" width="250">
							<template #default="scope">
								<sc-select  :disabled="!scope.row.isSet"  v-model="scope.row.configType" dic="customConfig" clearable filterable></sc-select>
							</template>
						</el-table-column>
						<el-table-column label="配置描述" prop="configTitle" width="400">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.configTitle" placeholder="请输入内容"></el-input>
								<span v-else>{{scope.row.configTitle}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="1"></el-table-column>
						<el-table-column label="操作" fixed="right" width="140">
							<template #default="scope">
								<el-button-group>
									<el-button @click="table_edit(scope.row, scope.$index)" type="primary" text size="small">{{scope.row.isSet?'保存':"修改"}}</el-button>
									<el-button v-if="scope.row.isSet" @click="scope.row.isSet=false" type="primary" text size="small">取消</el-button>
									<el-popconfirm v-if="!scope.row.isSet" title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
										<template #reference>
											<el-button type="primary" text size="small">删除</el-button>
										</template>
									</el-popconfirm>
								</el-button-group>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
				</el-tab-pane>

			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
	export default {
		name: 'extend-config-manage',
		data() {
			return {
				setting: []
			}
		},
		mounted() {
			this.getExtendConfig();
		},
		methods: {
			table_add(){
				var newRow = {
					configKey: "",
					configValue: "",
					configTitle: "",
					configType:"",
					isSet: true
				}
				this.setting.push(newRow)
			},
			async table_edit(row){
				if(row.isSet){//保存
					var res = await this.$API.system.customConfig.saveExtendConfig.post(row);
					if(res.success){
						row.isSet = false
					}
				}else{
					row.isSet = true
				}
			},
			async table_del(row, index){
				var res = await this.$API.system.customConfig.delete.delete(row.id);
				if(res.success){
					this.setting.splice(index, 1)
					this.$message.success("删除成功")
				}

			},
			async getExtendConfig(){
				var res = await this.$API.system.customConfig.extendConfigList.get();
				if(res.success){
					res.data.forEach(item =>{
						this.setting.push({
							id:item.id,
							configKey: item.configKey,
							configValue: item.configValue,
							configTitle: item.configTitle,
							configType:item.configType,
							isSet: false
						})
					})
				}
			}
		}
	}
</script>

<style>
</style>
